import React, { Component } from 'react';
import { Dispatch } from 'redux';
import { connect } from 'dva';

import { Form } from '@ant-design/compatible';
import { FormComponentProps } from '@ant-design/compatible/es/form';

import {
  Row, Col, Modal, Input,
} from 'antd';
import '@ant-design/compatible/assets/index.css';

import { CouriersListItem } from '../data';

interface SetPasswordProps extends FormComponentProps {
  dispatch?: Dispatch | any;
  form: any;
  detail: CouriersListItem;
  visible: boolean;
  changeModal: (visible: boolean) =>void;
}

interface SetPasswordState {}

@connect(({
  couriersMangagementList,
}: any) => ({ couriersMangagementList }))

class SetPasswordElem extends Component<SetPasswordProps, SetPasswordState> {
  state = {}

  handleSubmit = () => {
    const { form: { validateFields } } = this.props;
    validateFields((errors: any, values: any) => {
      if (errors) return;

      const {
        detail: { userId, courierId },
        dispatch,
      } = this.props;

      dispatch({
        type: 'couriersMangagementList/setPwd',
        payload: { userId, courierId, ...values },
      });

      this.handleCancel();
    });
  }

  handleCancel = () => {
    const { changeModal } = this.props;
    changeModal(false);
  }

  render() {
    const {
      visible,
      detail,
      form: { getFieldDecorator },
    } = this.props;
    return (
      <Modal
        visible={visible}
        destroyOnClose
        onOk={this.handleSubmit}
        onCancel={this.handleCancel}
      >
        <Form hideRequiredMark className="tableListForm">
          <Row gutter={{ md: 8, xl: 24, lg: 48 }}>
            <Col span={24}>
              <Form.Item label="投递人姓名">
                <div>{detail.realName}</div>
              </Form.Item>
            </Col>
            <Col span={24}>
              <Form.Item label="设置新密码">
                {getFieldDecorator('password', ({
                  rules: [{ required: true, message: '请输入新密码' }],
                }))(
                  <Input
                    allowClear
                    type="password"
                    placeholder="请输入"
                    autoComplete="off"
                  />,
                )}
              </Form.Item>
            </Col>
          </Row>
        </Form>
      </Modal>
    );
  }
}

export default Form.create<SetPasswordProps>()(SetPasswordElem);
